<template>
  <div>
    <simple-data-dialog
      :title="$t('tenant.userManage.store')"
      :visible.sync="visible"
      :size="size"
    >
      <data-select
        :search-data="search"
        @return-search="searchList"
        @return-reset="reset('search')"
      />
      <!-- 表格 -->
      <data-table
        ref="table"
        :table-option="tableOption"
        :table-data="tableData"
        :column="column"
      />
      <div slot="footer">
        <el-button @click="visible = false;">{{ $t('common.cancel') }}</el-button>
        <el-button
          type="primary"
          @click="clickBtn"
        >{{ $t('common.ok') }}</el-button>
      </div>
    </simple-data-dialog>
  </div>
</template>

<script>
import DataSelect from '@/components/DataSelect'
import DataTable from '@/components/DataTable'
import SimpleDataDialog from '@/components/SimpleDataDialog'
import merchantApi from '@/api/tenant/merchant'
export default {
  name: '',
  components: {
    DataSelect,
    DataTable,
    SimpleDataDialog
  },
  data() {
    return {
      visible: false,
      size: 'middle',
      // 搜索框参数
      search: {
        storeCodeOrName: {
          label: this.$t('tenant.userManage.storeCodeOrName'),
          value: '',
          type: 'input'
        }
      },
      tableOption: {
        option: {
          height: 400,
          enableSelected: true
        },
        event: {
          selectionChange: this.selectionChange
        }
      },
      // 表格参数
      column: {
        // 表头
        data: [
          {
            label: this.$t('tenant.userManage.storeCode'),
            prop: 'storeCode',
            show: true
          },
          {
            label: this.$t('tenant.userManage.storeName'),
            prop: 'storeName',
            show: true
          }
        ]
      },
      searchData: {},
      tableData: [],
      oldSelect: [],
      selectData: []
    }
  },

  methods: {
    show() {
      this.visible = true
      this.getListBySearch()
    },
    // 获取列表数据
    getListBySearch() {
      const param = this.searchData
      merchantApi.getStoreList(param).then((res) => {
        this.tableData = res.data.data
        this.$nextTick(() => {
          if (this.oldSelect) {
            const selectData = []
            this.oldSelect.map((old) => {
              this.tableData.map((v) => {
                // eslint-disable-next-line eqeqeq
                if (old == v.storeCode) {
                  selectData.push(v)
                }
              })
            })
            this.selectData = selectData
            this.$refs.table.toggleRowSelection(this.selectData)
          }
        })
      })
    },
    searchList(data) {
      this.searchData = data
      this.getListBySearch()
    },
    selectionChange(data) {
      this.selectData = data
    },
    // 重置
    reset(type) {
      // eslint-disable-next-line eqeqeq
      if (type == 'search') {
        // 搜索组件重置
        for (const key in this.search) {
          const val = this.search[key]
          // eslint-disable-next-line eqeqeq
          if (val.constructor == Object) {
            this.search[key].value = null
          }
        }
        this.searchData = {}
        this.getListBySearch()
      }
    },
    clickBtn() {
      // eslint-disable-next-line eqeqeq
      if (this.selectData.length == 0) {
        this.$message.warning(this.$t('common.record'))
        return
      }
      this.visible = false
      this.$emit('confirm', this.selectData)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog ::v-deep .el-dialog__header {
  height: 20px;
  padding: 20px 40px;
  background: #f5f5f5;
}
.dialog ::v-deep .el-dialog__body {
  height: 550px;
  padding: 0 40px;
  overflow: auto;
}
.dialog ::v-deep .el-dialog__footer {
  padding: 20px 40px;
}
.header-title {
  display: flex;
  font-size: 20px;
  line-height: 20px;
  .header-icon {
    margin-right: 17px;
  }
}
.el-form {
  margin-right: -30px;
  padding-top: 10px;
}
.el-form-item {
  width: 33%;
  margin-right: 0;
  margin-bottom: 12px;
  padding-right: 30px;
  box-sizing: border-box;
}
::v-deep .el-form-item__label {
  padding-bottom: 10px;
  line-height: normal;
}
::v-deep .el-form-item__content {
  line-height: 32px;
}
::v-deep .el-input__inner {
  height: 32px !important;
}
::v-deep .el-input__icon {
  line-height: 32px;
}
.el-select,
.el-input {
  width: 100%;
}
</style>
